<template>
	<view class="body">
		<view class="head">
			<view style="display: inline-block;">
				<view class="body-data" style="display: inline-block;">
					<view style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(2vh);">
						<image :src="user.avatar" style="width: calc(26vw);height: calc(15vh);"></image>
					</view>
					<view class="head-text" style="width: calc(61vw);display: inline-block;position: absolute; position:sticky;vertical-align: top;">
						<view style="margin-top: calc(7vh);font-size: medium;">{{user.nickname}}</view>
						<!-- <view>抖音号：</view>
						<view>
							<text v-for="(item,index) in user.species" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 0;color:#FFFFFF;background-color: #25ACFF;">{{item}}</text>
						</view>
						<view>
							<text v-for="(item,index) in user.cooperation" :key="index" style="margin-right: calc(2vw);">{{item}}</text>
						</view> -->
						<!-- <view style="border: #FFFFFF solid 1rpx; width: 100%;"></view> -->
						<!-- <view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);">
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">{{fans}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">短视频合作</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- <view class="body-data back">
				<view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);justify-content: center;">
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">纯佣比例</text>
						<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">短视频带货</text>
						<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">短视频制作</text>
						<text style="font-size: calc(2vh);font-weight: 700">￥{{user.live}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
				</view>
				<view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);justify-content: center;">
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">直播带货</text>
						<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">直播专场</text>
						<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
					<view class="body-title">
						<text style="font-size: calc(1vh);color: #C8C7CC;">商演合作</text>
						<text style="font-size: calc(2vh);font-weight: 700">￥{{user.live}}</text>
						<text style="font-size: calc(2vh);font-weight: 700">--</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="body-data back">
				<view style="margin: calc(2vh) 0 calc(2vh) 0;">
					<view>
						<text style="font-size: calc(2vh);font-weight: 700">商务合作</text>
					</view>
					<view>
						<text>{{user.businessCooperation}}</text>
					</view>
				</view>
			</view> -->
			<view class="body-data back">
				<view style="margin: calc(2vh) 0 calc(2vh) 0;">
					<view>
						<text style="font-size: calc(2vh);font-weight: 700">达人数据</text>
					</view>
					<view style="display: flex; margin-left: calc(2vw)">
						<view class="body-title" style="margin-right: calc(15vw);">
							<text style="font-size: small;color: #999999;">粉丝数</text>
							<text style="font-size: calc(2vh);font-weight: 700">{{fans}}</text>
						</view>
						<view class="body-title">
							<text style="font-size: small;color: #999999;">点赞数</text>
							<text style="font-size: calc(2vh);font-weight: 700">{{like}}</text>
						</view>
					</view>
					<!-- <view style="display: flex; margin-left: calc(2vw)">
						<view class="body-title" style="margin-right: calc(15vw);">
							<text style="font-size: calc(1vh);color: #C8C7CC;">平均点赞数</text>
							<text style="font-size: calc(2vh);font-weight: 700">{{user.fans/30}}</text>
						</view>
						<view class="body-title">
							<text style="font-size: calc(1vh);color: #C8C7CC;">平均评论数</text>
							<text style="font-size: calc(2vh);font-weight: 700">{{user.like/30}}</text>
						</view>
					</view> -->
				</view>
			</view>
			<!-- <view class="body-data back">
				<view style="margin: calc(2vh) 0 calc(2vh) 0;">
					<view>
						<text style="font-size: calc(2vh);font-weight: 700">粉丝趋势</text>
					</view>
					<view>
						<canvas id="myChart" width="400" height="400"></canvas>
					</view>
				</view>
			</view> -->
			<!-- <view class="body-data back">
				<view style="margin: calc(2vh) 0 calc(2vh) 0;">
					<view>
						<text style="font-size: calc(2vh);font-weight: 700">评论和点赞趋势</text>
					</view>
					<view>
						图表
					</view>
				</view>
			</view> -->
			<view class="body-data back">
				<view style="margin: calc(2vh) 0 calc(2vh) 0;">
					<view>
						<text style="font-size: calc(2vh);font-weight: 700">视频数据</text>
						<text style="float: right;color: #C8C7CC" @click="toMasterVideoList">查看更多 ></text>
					</view>
					<view class="body-data-videoData" v-for="(item,index) in video" :key="index" style="width: calc(40vw);height: calc(55vh);">
						<view>
							<image :src="item.cover" style="width: calc(20vh);height: calc(35vh);"></image>
						</view>
						<view style="text-align: center;">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	export default {
		onLoad: function(options) {
			this.openId = options.openId
			this.userId = options.userId
			this.getMasterDetail()
			this.getVideoInfo()
			console.log(options)
		},
		data() {
			return {
				user: {},
				fans: "",
				like: "",
				// user: {
				// 	username: "木丁",
				// 	species: ["全品类", "家居日用"],
				// 	cooperation: ["纯佣合作", "短视频合作", "直播合作"],
				// 	carryingMethod: "带货方式",
				// 	fans: "408.23W",
				// 	videoCooperation: "123",
				// 	live: "123",
				// 	servant: "123",
				// 	businessCooperation: "2312312",
				// },
				video: []
			}
		},
		methods: {
			getMasterDetail() {
				let openIdList = []
				openIdList.push(this.openId)
				console.log(openIdList)
				this.$http({
					url: "/base/douyin/info",
					method: "POST",
					data: openIdList,
				}).then(res => {
					this.user = res.data.data[0]
					this.getFans()
					this.getLike()
				})
			},
			getVideoInfo() {
				let openIdList = []
				openIdList.push(this.openId)
				this.$http({
					url: "/douyin/getVideoList/0",
					method: "POST",
					data: {
						openId: openIdList
					}
				}).then(res => {
					this.video = []
					let result = res.data.data
					for (let i = 0; i < 4; ++i){
						this.video.push(result.list[i])
					}
				})
			},
			getLike() {
				this.$http({
					url: "/douyin/open/data/user/like",
					method: "POST",
					data: {
						openId: this.openId,
						dataType: 30
					},
				}).then(res => {
					let result = res.data.data.data.result_list
					let likeLength = result.length
					this.like = result[likeLength - 1].new_like
					console.log(this.user)
				})
			},
			getFans() {
				this.$http({
					url: "/douyin/open/data/user/fans",
					method: "POST",
					data: {
						openId: this.openId,
						dataType: 30
					},
				}).then(res => {
					let result = res.data.data
					this.fans = result.data.result_list[result.data.result_list.length - 1].total_fans
				})
			},
			toMasterVideoList() {
				uni.navigateTo({
					url: "/pages/master/masterVideoList?userId=" + this.userId + "&openId=" + this.openId
				})
			}
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: calc(1vw);
		margin: calc(1vh) calc(3vw) 0 calc(3vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-data-videoData {
		float: left;
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		width: calc(27vw);
	}

	.head {
		background-color: #2C405A;
		height: 30%;
	}

	.head-text {
		color: #FFFFFF;
	}

	.back {
		background-color: #FFFFFF;
	}
</style>
